import type { CommonComponentProps } from '../../interface'
import { useMaterialDrop } from '../../hooks/useMaterialDrop'
export default function Container({ id, name, styles, children }: CommonComponentProps) {//使得该组件在父组件内也可以在该组件内放子结构体(相当于一个容器组件)


  const { canDrop, dropRef, contextHolder } = useMaterialDrop(['Container', 'Button'], id)

  return (
    <>
      {contextHolder}
      <div
        data-component-id={id}
        ref={dropRef as any}
        style={styles}
        className={`min-h-[100px] p-[20px]
      ${canDrop ? 'border-[2px] border-[blue]' : 'border-[1px] border-[#000] '}`}>
        {children}
      </div>
    </>
  )
}
